<template>
  <div class="forgetpassword">
    <van-nav-bar
      title="找回密码"
      left-text="返回"
      @click-left="back"
      fixed
    ></van-nav-bar>
    <van-field
      v-model="email"
      type="text"
      label="邮箱"
      name="nickName"
      placeholder="邮箱"
    />
    <van-button type="danger" @click="get">获取邮箱验证码</van-button>
    <van-form @submit="finpass">
      <van-field
        v-model="phone"
        type="text"
        label="手机号"
        :rules="UserRules"
        name="phone"
        placeholder="请输入您的手机号"
      />
      <van-field
        name="password"
        :rules="PasswordRules"
        label="密码"
        v-model="password"
        @click-right-icon="isRegister = !isRegister"
        :type="isRegister ? 'password' : 'text'"
        placeholder="请输入您的新密码"
        :right-icon="isRegister ? 'closed-eye' : 'browsing-history'"
      />
      <van-field
        v-model="emailma"
        type="text"
        label="验证码"
        name="emailma"
        :rules="emailmaRules"
      />

      <van-button type="danger">确定</van-button>
    </van-form>
  </div>
</template>

<script>
import { Dialog } from 'vant'

import {
  emailValidCodeAPI,
  checkValidCodeAPI,
  retrievePasswordAPI
} from '@/api/user.js'

export default {
  data () {
    return {
      emailmaRules: [
        {
          required: true,
          message: '验证码格式不正确',
          pattern: /^[0-9]*$/
        }
      ],
      UserRules: [
        {
          required: true,
          message: '手机号格式不正确',
          pattern: /^1[3-9]\d{9}$/
        }
      ],
      isRegister: true,
      PasswordRules: [
        {
          required: true,
          message: '密码格式不正确',
          pattern: /^[A-Za-z]\w{5,15}$/
        }
      ],
      email: '',
      phone: '',
      password: '',
      emailma: '',
      sureemail: ''
    }
  },
  methods: {
    back () {
      this.$router.go(-1)

      this.$router.push({ name: 'Login' })
    },

    finpass (value) {
      console.log(value)
      Dialog.confirm({
        title: '确定修改',
        message: '确定修改密码'
      })
        .then(() => {
          this.each()
        })
        .catch(() => {
          // on cancel
        })
    },
    // 获取验证码
    get () {
      // 邮箱正则判断用户输入的邮箱是否符合标准
      const reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      if (!reg.test(this.email)) {
        Dialog.alert({
          title: '提示',
          message: '邮箱格式不正确'
        })
      } else {
        emailValidCodeAPI({
          // 调用获取验证码接口
          appkey: this.$store.state.appkey,
          email: this.email
        }).then(res => {
          this.$toast(res.msg) // 提醒用户验证码发送成功
        })
      }
    },
    // 验证验证码
    each () {
      checkValidCodeAPI({
        // 验证用户验证码是否正确
        appkey: this.$store.state.appkey,
        validCode: this.emailma
      }).then(res => {
        if (res.code === 'K002') {
          this.$toast(res.msg) // 如果验证码错误 提醒用户验证码错误
        } else if (res.code === 'K001') {
          this.setpassworld() // 验证码正确则调用修改密码接口
        }
      })
    },
    // 修改密码方法
    setpassworld () {
      retrievePasswordAPI({
        // 调用修改密码接口
        appkey: this.$store.state.appkey,
        password: this.password,
        phone: this.phone
      }).then(res => {
        if (res.code === 'L003') {
          this.$toast(res.msg) // 提醒用户修改密码失败
        }
        if (res.code === 'L001') {
          this.$toast(res.msg) // 提醒用户修改密码成功并跳转回登录页面
          this.$router.push({ name: 'Login' })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.forgetpassword {
  padding: 50px 10px 0;
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
  /deep/ .van-field {
    border-bottom: 1px solid #d7d7d7;
    margin-bottom: 5px;
  }
  /deep/ .van-button {
    background-color: #0833bc;
    border-color: #0833bc;
    margin: 10px;
  }
}
</style>
